<template>
	<view>
		<view class="container">
			<uni-nav-bar title="帖子详情" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft">
			</uni-nav-bar>
			<view class="body">
				<scroll-view class="select-facility-view" scroll-y="true"
					:style="{height:setcollapseheight() - 40 + 'px'}">
					<view class="main">
						<view class="content">
							<view class="oneline">
								<view class="serialnumber"></view>
								<view class="title">
									{{postList.invitationTitle}}
								</view>
							</view>
							<view class="twoline">
								<view class="img">
									<image src="@/static/index-message/V.png"></image>
								</view>
								<view class="name">
									{{postList.invitationContent}}
								</view>
							</view>
							<view class="twoline">
								<view class="img2">
									<image src="@/static/index-message/jingliren.png"></image>
								</view>
								<view class="name">
									提问人：{{userName}}
								</view>
							</view>
							<view class="twoline">
								<view class="img3">
									<image src="@/static/index-message/unit.png"></image>
								</view>
								<view class="name">
									提问日期：{{postList.createTime}}
								</view>
							</view>
							<view class="twoline" style="margin-bottom: 16rpx;">
								<view class="img3">
									<image src="@/static/index-message/liulanliang.png"></image>
								</view>
								<view class="name">
									浏览量：{{postList.pageView}}
								</view>
							</view>
							<template>
								<view class="firstimg" v-for="(item,index) in imgList1" :key="item.invitationImgUrl"
									v-if="item.invitationImgUrl">
									<image :src="item.invitationImgUrl" @click="clickImg(item.invitationImgUrl)"></image>
								</view>
							</template>
							<view class="firstvideo" v-if="item.invitationVedioUrl" v-for="(item,index) in videoList1"
								:key="index">
								<MyVideo :videoUrl="item.invitationVedioUrl"></MyVideo>
							</view>
							<!-- 交流表 -->
							<view class="publish" v-for="(item,index) in communicationList" :key="index">
								<view class="publishuser">
									<view class="left">
										<template>
											<view class="icon" v-if="item.user && item.user.userType === 'expert_user'">
												<image src="@/static/index-message/expert.png" mode=""></image>
											</view>
											<view class="icon1" v-else>
												<image src="@/static/index-message/jingliren.png" mode=""></image>
											</view>
										</template>
										<view class="name">
											{{item.user.nickName}}
										</view>
									</view>
									<view class="right">
										{{item.createTime}}
									</view>
								</view>
								<view class="publishcontent">
									<view class="method">
										{{item.exchangeContent}}
									</view>
								</view>
								<view class="publishImg" v-if="item.picUrls" v-for="it in item.picUrlList">
									<image :src="it" mode="" style="margin: 10rpx 0;" @click="clickImg(it)"></image>
								</view>
								<view class="videoImg" style="margin-top: 20rpx;" v-if="item.vedioUrls"
									v-for="it in item.vedioUrlList">
									<MyVideo :videoUrl="it" class="video"></MyVideo>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<u-button class="button" @click="isShow" color="#0480FB" type="primary"
				style="border-radius: 114rpx;" size="mini" text="回复">
			</u-button>
			
			<bottomTabar></bottomTabar>
		</view>
		
		<u-popup :show="show" mode="center" width="700rpx" height="600px" @close="show=false">
			<view class="pop">
				<view class="picture">
					<view class="pictureitem">
						<view class="title">
							<image
								src="@/static/socialized-service/specialist-consultation/user-module/post-inquiry/upload.png"
								mode=""></image>
							上传图片
						</view>
						<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							deletable :maxCount="9"></u-upload>
					</view>
				</view>
				
				<view class="picture">
					<view class="title">
						<image
							src="@/static/socialized-service/specialist-consultation/user-module/post-inquiry/video.png"
							mode=""></image>
						上传视频
					</view>
					<u-upload :fileList="fileList2" @afterRead="afterVideoRead" name="2" multiple :maxCount="1"
						accept="video"></u-upload>
				</view>

				<view class="replaysContent">
					<u--textarea :confirmType="null" style="margin-bottom: 20rpx;" v-model="replayInfo"
						placeholder="请输入回复内容" />
				</view>
				<view class="replay">
					<u-button class="btn" style="background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);" type="primary"
						@click="addReplay" size="mini" text="回复"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showImg" mode="center" width="100%" height="100%" @close="showImg=false">
			<view class="showImg">
				<image :src="showImgUrl" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		baseurl,
		cloudBaseurl,
		agrServiceUrl
	} from '@/config/baseUrl.js'
	import postApi from '@/api/socialized-servce/specialist-consultation/user-module/consultation-list/index.js'
	import navBar from '../../../components/nav-bar/index.vue'
	import bottomTabar from '../../../components/bottom-tabar/index.vue'
	import MyVideo from "@/subPage1/components/myVideo/myVideo.vue"
	import Api from '@/api/socialized-servce/specialist-consultation/expert-module/my-diagnosis/diagnosis-details/index.js'
	export default {
		name: 'invitation-details',
		components: {
			bottomTabar,
			navBar,
			MyVideo
		},
		data() {
			return {
				postList: {},
				communicationList: [],
				replayInfo: '',
				userName: '',
				invitationId: 0,
				type: '',
				fileList: [],
				pictureIdList: [],
				fileList2: [],
				collectData: {
					imgList: [],
					vedioList: [],
					picUrlList: [],
					vedioUrlList: []
				},
				duration: 0,
				resolveFlag: false,
				show: false,
				value: 0,
				appraiseContent: '暂无评价内容',
				imgList1: [],
				videoList1: [],
				showImg: false,
				showImgUrl: ''
			}
		},
		onLoad(option) {
			this.invitationId = option.id
		},
		onShow() {
			this.getCommunicationList()
			this.getPostList()
		},
		methods: {
			clickImg(e) {
				this.showImg = !this.showImg
				this.showImgUrl = e
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getCommunicationList() {
				let params = {
					invitationId: this.invitationId
				}
				let res = await Api.queryCommunicationList(params)
				if (res.code === 200) {
					this.communicationList = res.data
				}
			},
			async getPostList() {
				let params = {}
				let res = await Api.queryPostList(params, this.invitationId)
				if (res.code == 200) {
					this.resolveFlag = res.data.resolveFlag
					this.postList = res.data
					this.userName = this.postList.publisher.nickName || ''
					this.value = res.data.evaluateLevel
					this.imgList1 = res.data.imgList
					this.videoList1 = res.data.vedioList
					if (res.data.evaluateContent != undefined) {
						this.appraiseContent = res.data.evaluateContent
					}

				}
			},
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(136)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight
				// #endif
				return winHeight
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.pictureIdList
				if (this.fileList.length === 0) {
					this.isshowFile = true
				}

			},
			async afterRead(event) {
				this.type = 'image'
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				this.isshowFile = false
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.afterfileList = this.fileList

			},
			async afterVideoRead(event) {
				this.type = 'video'
				this.duration = event.file[0].duration
				let lists = [].concat(event.file)
				let fileListLen = this.fileList2.length
				this.isshowFile = false
				lists.map((item) => {
					this.fileList2.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList2[fileListLen]
					this.fileList2.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.afterfileList = this.fileList2
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl + `common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							resolve(data);
							if (this.type == 'image') {
								this.collectData.picUrlList.push(`${agrServiceUrl}` + data.slice(
									1))
								uni.showToast({
									title: '图片上传成功'
								})
							} else {
								this.collectData.vedioUrlList.push(`${agrServiceUrl}` + data.slice(
									1))
								uni.showToast({
									title: '视频上传成功'
								})
							}
							if (this.pictureIdList.includes(data)) return
							else {
								setTimeout(() => {
									this.pictureIdList.push(data)
								}, 1000)

							}
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							})
						}
					});
				})
			},
			isShow() {
				this.show = true
			},

			async addReplay() {
				if (this.replayInfo === '') {
					uni.showToast({
						title: '回复不能为空'
					})
					return
				}
				let params = {
					userId: uni.getStorageSync('userId'),
					invitationId: this.invitationId,
					exchangeContent: this.replayInfo,
					picUrlList: this.collectData.picUrlList,
					vedioUrlList: this.collectData.vedioUrlList
				}
				let res = await Api.add(params)
				if (res.code === 200) {
					this.getCommunicationList()
					this.replayInfo = ''
					this.show = false
					uni.showToast({
						title: '诊断成功！'
					})
				} else {
					uni.showToast({
						title: '回复失败！'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F6FA;

		.body {
			height: 100%;

			.select-facility-view {

				.main {
					position: relative;
					padding: 0 32rpx;
					overflow: hidden;

					.content {
						background-color: #fff;
						border-radius: 20rpx;
						padding-bottom: 20rpx;
						font-size: 28rpx;

						.oneline {
							padding-top: 36rpx;
							position: relative;
						
							.serialnumber {
								position: absolute;
								top: 44rpx;
								left: 0;
								width: 10rpx;
								height: 28rpx;
								background-color: #91743E;
							}
						
							.title {
								padding-left: 24rpx;
								font-size: 32rpx;
								font-weight: 500;
								color: #91743E;
							}
						}

						.twoline {
							margin-top: 26rpx;
							display: flex;
							padding: 0 30rpx;
						
							.img {
								width: 35rpx;
								height: 30rpx;
								margin-right: 26rpx;
						
								image {
									width: 35rpx;
									height: 30rpx;
									vertical-align: middle;
								}
							}
						
							.img2 {
								width: 30rpx;
								height: 30rpx;
						
								image {
									position: relative;
									z-index: 999;
									width: 27rpx;
									height: 35rpx;
									vertical-align: middle;
								}
							}
						
							.img3 {
								width: 35rpx;
								height: 26rpx;
						
								image {
									position: relative;
									z-index: 999;
									width: 35rpx;
									height: 26rpx;
								}
							}
						
							.name {
								padding-left: 24rpx;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}
						}
						
						firstimg {
							padding: 0 28rpx;
							height: 320rpx;
							margin-bottom: 20rpx;
						
							image {
								width: 100%;
								height: 100%;
							}
						}
						
						.firstvideo {
							padding: 0 28rpx;
							height: 320rpx;
							padding-bottom: 20rpx;
						
							::v-deep iframe {
								width: 100% !important;
								height: 320rpx !important;
							}
						}

						.publish {
							padding: 20rpx 0;
							background: #FFFFFF;
							box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
						
							.publishuser {
								display: flex;
								align-items: center;
								justify-content: space-between;
								padding: 0 36rpx;
								font-size: 28rpx;
								font-family: Arial-Regular, Arial;
								font-weight: 400;
								color: #606060;
						
								.left {
									display: flex;
									align-items: center;
						
									.icon {
										width: 26rpx;
										height: 28rpx;
										margin-right: 10rpx;
									
										image {
											width: 100%;
											height: 100%;
										}
									}
									
									.icon1 {
										width: 26rpx;
										height: 32rpx;
										margin-right: 10rpx;
									
										image {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						
							.publishcontent {
								margin-top: 20rpx;
								padding: 0 80rpx;
								font-size: 26rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #606060;
							}
						
							.publishImg {
								margin-top: 20rpx;
								width: 100%;
								height: 408rpx;
						
								image {
									width: 100%;
									height: 408rpx;
								}
							}
						
							.videoImg {
								margin-top: 20rpx;
								width: 100%;
								height: 408rpx;
						
								::v-deep iframe {
									width: 100% !important;
									height: 408rpx !important;
								}
							}
						}

					}

				}

			}
		}

	}

	/deep/.u-button {
		position: fixed!important;
		bottom: 150rpx!important;
		width: 346rpx!important;
		height: 58rpx!important;
		left: 50%!important;
		transform: translateX(-50%)!important;
		border-radius: 29rpx!important;
		z-index: 1;
	}

	.pop {
		width: 600rpx;
		padding: 20rpx;

		.picture {
			position: relative;
			height: 60rpx;
			margin: 0 32rpx;
			margin-bottom: 20rpx;
			background: #BEDFFF;
			box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.pictureitem {
				height: 60rpx;
				overflow: hidden;
			}
			.u-upload {
				font-size: 20rpx;
			}

			.title {
				display: flex;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				position: absolute;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #0480FB;
				justify-content: center;
				align-items: center;
				pointer-events: none;

				image {
					width: 54rpx;
					height: 54rpx;
				}
			}
		}
	}

	::v-deep .u-upload__button {
		display: block;
		width: 100% !important;
		height: 60rpx !important;
		background: #BEDFFF!important;
	}
	
	::v-deep .u-popup__content {
		overflow: hidden;
		border-radius: 20rpx;
	}
	
	::v-deep .u-upload {
		border-radius: 50%;
		overflow: hidden;
	}
	
	::v-deep .u-icon__icon {
		display: none!important;
	}

	::v-deep .u-upload__wrap__preview__image {
		display: none;
		margin: 0;
	}

	::v-deep .u-upload__wrap__preview__other {
		display: none!important;
		width: 110rpx;
		height: 114rpx;
	}
</style>